<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
		<title>衣柜选择时间</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/sytle.css">
		<script src="${pageContext.request.contextPath}/js/jquery.1.7.2.min.js"></script>
	    <script src="${pageContext.request.contextPath}/js/mobiscroll_002.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/mobiscroll_004.js" type="text/javascript"></script>
		<link href="${pageContext.request.contextPath}/css/mobiscroll_002.css" rel="stylesheet" type="text/css">
		<link href="${pageContext.request.contextPath}/css/mobiscroll.css" rel="stylesheet" type="text/css">
		<script src="${pageContext.request.contextPath}/js/mobiscroll.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/mobiscroll_003.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/mobiscroll_005.js" type="text/javascript"></script>
		<link href="${pageContext.request.contextPath}/css/mobiscroll_003.css" rel="stylesheet" type="text/css">
		<style type="text/css">
	        body {
	            background: #fff;
	        }
	        input, select {
	            width: 100%;
	            padding: 5px;
	            margin: 5px 0;
	            border: 1px solid #ffb736;
	            box-sizing: border-box;
	            border-radius: 5px;
	            -moz-box-sizing: border-box;
	            -webkit-box-sizing: border-box;
	            -webkit-border-radius: 5px;
	        }

	        .content {
	            padding: 15px;
	            background: #fff;
	        }
	        .demos{margin-bottom: 10px;}
		       .sure_btn{
		       		background: #ffb736;
		       		border: none;
		       		color: #fff;
		       		font-size: 16px;
		       		margin: 30px 0 20px;
	    			line-height: 26px;
		       }
	    </style>
	</head>
	<body>
		<div class="page">
			<header>
			    <div class="navbar">
			        <ul>
				        <li class="l-back">
				        <a href="javascript:history.go(-1)" >
				        <img src="${pageContext.request.contextPath}/images/left.png" alt="返回"/>
				        </a>
				        </li>
				        <li class="n-word">选择时间</li>
				        <li class="n-intro"></li>
			        </ul>
			    </div>
		   </header>
		   <div class="content">
		   		<form action="${pageContext.request.contextPath}/goods/buy.html" id="wardrobeForm" name="wardrobeForm" >
					<div class="demos">
						<label for="appDate">请选择服务日期:</label>
						<input value="${nowtime}" class="" readonly="readonly" name="appDate" id="appDate" type="text">
					</div>
					<div class="demos">
						<label for="appTime">请选择服务上门时间:</label>
						<input value="${hourtime}" class="" readonly="readonly" name="appTime" id="appTime" type="text">
					</div>
					<input type="submit" value="确定" class="sure_btn">
					
					<input type="hidden" name="serviceType" id="serviceType" value="11"/>
    				<input type="hidden" name="price"  id="price" value="120"/>
				</form>
			</div>
		</div>
		<script type="text/javascript">
	        $(function () {
	        	var curDate=new Date();
	        	
				var currYear = curDate.getFullYear();	
				var currMonth = curDate.getMonth(); // 获取月  
				var currDay = curDate.getDate(); // 获取日  
				
				var myDate = new Date(curDate.getTime() + 24*7*60*60*1000);  //往后推7天
				var myYear=myDate.getFullYear();
				var myMonth=myDate.getMonth();
				var myDay=myDate.getDate();
				
				
				var opt={};
				opt.date = {preset : 'date'};
				opt.datetime = {preset : 'datetime'};
				opt.time = {preset : 'time'};
				opt.default = {
					theme: 'android-ics light', //皮肤样式
			        display: 'modal', //显示方式 
			        mode: 'scroller', //日期选择模式
					dateFormat: 'yyyy-mm-dd',
					lang: 'zh',
					showNow: true,
					nowText: "今天",
			        startYear: currYear, //开始年份
			        endYear: myYear,  //结束年份
			        minDate:new Date(currYear, currMonth, currDay+1), //最小日期
	            	maxDate:new Date(myYear, myMonth, myDay, 23, 59, 59) //最大日期
				};
	
			  	$("#appDate").mobiscroll($.extend(opt['date'], opt['default']));
			  	var optDateTime = $.extend(opt['datetime'], opt['default']);
			  	var optTime = $.extend(opt['time'], opt['default']);
			    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
			    $("#appTime").mobiscroll(optTime).time(optTime);
	        });
	    </script>
	</body>
</html>
